<template>
    <div>
        APP
        
        <suspense>
            <template #default>
                <async-category></async-category>
            </template>
        </suspense>

         <suspense>
            <template #fallback>
                <loading></loading>
            </template>
        </suspense>
    </div>
</template>

<script>
    import { defineAsyncComponent } from 'vue';

    import Loading from './Loading.vue';

    // import AsyncCategory from './AsyncCategory.vue';
    // 这样写是为了webpack分包处理 
    const AsyncCategory = defineAsyncComponent(() => import('./AsyncCategory.vue'))

    // const AsyncCategory = defineAsyncComponent({
    //     loader: () => import('./AsyncCategory.vue'),
    //     loadingComponent: Loading,
    //     // errorComponent
    //     // 在显示loadingComponent组件之前,等待多长时间
    //     delay: 2000,
    //     /**
    //      * err: 错误信息,
    //      * retry: 函数 调用retry,尝试重新加载
    //      * attempts: 尝试次数
    //      */
    //     onError: function(err, retry, attempts) {

    //     }
    // })


    export default {
        components: {
            AsyncCategory,
            Loading
        }
    }
</script>

<style scoped>

</style>